<!-- 设计界面中间部分 -->
<template>
  <div class="pass-design-center">
    <div class="w-full">
      <div class="w-full flex justify-evenly">
        <!-- 左边的卡 -->
        <div class="card-container">
          <div class="text-center mb-4">
            <span>{{ t('flypass.card_front') }}</span>
          </div>
          <div id="PassCard" class="pass-card front" :style="{backgroundColor: store.passTemplate.backgroundColor}">
            <div class="pass-card-header">
              <div class="logo">
                <img :src="store.headLogo" alt="" @click="() => store.setActiveMenu('Theme')">
                <span class="logo-text" @click="onLogoTextClick" :style="{color: store.passTemplate.textColor}">{{ store.passTemplate.logoText }}</span>
              </div>
              <div class="drag-container card-header-drag">                
                <Container :shouldAcceptDrop="shouldCardHeaderAcceptDrop" @drop="(e: DragEvent) => onDrop(e, 'Head')" :get-child-payload="getChildPayload('Head')"  orientation="horizontal" group-name="item">
                  <Draggable v-for="item in store.items.filter((item:Field) => item.position === 'Head')">
                    <div class="drag-item" :style="{color: store.passTemplate.labelColor}"  :class="{selected: store.currentItemId && (store.currentItemId === item.id)}" @click="(e) => onCardItemClick(item.id)">
                      <span class="label">{{ item.label }}</span>
                      <span class="skeleton"></span>
                    </div>
                  </Draggable>
                </Container>
              </div>
            </div>
            <div class="pass-card-image" @click="() => store.setActiveMenu('Theme')"> 
              <img :src="store.stripImage" alt="">
            </div>

            <div class="pass-card-body">
              <div class="drag-container card-body-drag">        
                <Container
                  :get-child-payload="getChildPayload('Body')"
                  :shouldAcceptDrop="shouldCardBodyAcceptDrop"
                  group-name="item" 
                  @drop="(e: DragEvent) => onDrop(e, 'Body')" orientation="horizontal">
                  <Draggable v-for="item in store.items.filter((item:Field) => item.position === 'Body')">
                    <div class="drag-item" :style="{color: store.passTemplate.labelColor}" :class="{selected: store.currentItemId && (store.currentItemId === item.id)}" @click="(e) => onCardItemClick(item.id)">
                      <span class="label">{{ item.label }}</span>
                      <span class="skeleton"></span>
                    </div> 
                    
                  </Draggable>
                </Container>
              </div>
            </div>

            <!-- 二维码 -->
            <div class="text-center mt-12" v-if="store.showBarcode"  @click="() => store.setActiveMenu('QRCode')">
              <div class="bar-code">
                <img :src="store.barcodeImage" class="mb-2"/>
                <p class="text-xs" v-if="store.passTemplate.barcodes && store.passTemplate.barcodes.length > 0">{{  store.passTemplate.barcodes[0].message }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边的卡 -->
        <div class="card-container">
          <div class="text-center mb-4">
            <span>{{ t('flypass.card_details') }}</span>
          </div>
          <div class="pass-card back">
            <div class="text-center font-bold mb-6">{{ t('flypass.special_card') }}</div>
            <div class="add-application">
              <div class="flex items-center justify-center">
                <button @click="onAddApplicationClick">{{ t('flypass.add_application') }}</button>
              </div>
            </div>
            <div class="switches">
              <div class="flex items-center justify-between">
                <span style="line-height: 44px;">{{ t('flypass.automatic-updates') }}</span>
                <el-switch class="mr-4"></el-switch>
              </div>
              <hr class="divider" />
              <div class="flex items-center justify-between">
                <span style="line-height: 44px;">{{ t('flypass.allow-notifications') }}</span>
                <el-switch class="mr-4"></el-switch>
              </div>
            </div>
            <div class="remove-pass">
              <span class="text-danger">{{ t('flypass.remove-pass') }}</span>
            </div>
            <div class="pass-detail-fields">
              <Container group-name="item" @drop="(e:DragEvent) => onDrop(e, 'Detail')">
                <Draggable class="details-item-container" v-for="item in store.items.filter((item:Field) => item.position === 'Detail')">
                  <div class="details-item" :class="{selected: store.currentItemId && (store.currentItemId === item.id)}"  @click="(e) => onCardItemClick(item.id)">
                    <span class="label">{{ item.key }}</span>
                    <span class="skeleton"></span>
                  </div> 
                </Draggable>
              </Container>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Container, Draggable } from "vue3-smooth-dnd";
import type { Field, Position } from '#/pass'
import { usePassStore } from '@/store/modules/pass'

interface DragEvent {
  removedIndex: number
  addedIndex: number
}
const store = usePassStore()
const { t } = useI18n()

function getChildPayload(position: string) {
  return (index: number) => {    
    return position
  }
}

function onDrop(e: DragEvent, position: Position) {    
  if(e.removedIndex === null && e.addedIndex !== null) {    
    if(store.draggingItem) {
      const newItem: Field = {...store.draggingItem, position}
      store.addItem(newItem)  
      store.removeFieldsItem(store.draggingItem.key)
    }    
  } else if(e.removedIndex !== null) {  
    const items = store.items.filter((item:Field) => item.position === position)
    store.setItems(store.items.filter((item:Field) => item.position !== position))
    const itemToAdd = items.splice(e.removedIndex, 1)[0]
    items.splice(e.addedIndex, 0, itemToAdd)
    store.setItems(items.concat(store.items))
  }
}

function shouldCardHeaderAcceptDrop(e, payload: string) {
  return store.items.filter(item => item.position === 'Head').length < 1 || payload === 'Head'
}

function shouldCardBodyAcceptDrop(e, payload: string) {  
  return store.items.filter(item => item.position === 'Body').length < 3 || payload === 'Body'
}

function onCardItemClick(id: number) {
  store.setRightPanelVisible(true)
  store.setRightPanelType('Item')
  store.setCurrentItemId(id)  
  if(store.getCurrentItem) {
    store.setRightPanelTitle(store.getCurrentItem.key)
  }
}

function onLogoTextClick() {
  store.setRightPanelVisible(true)
  store.setRightPanelType('Logo')
  store.setRightPanelTitle(t('flypass.logo'))
}

function onAddApplicationClick() {
  store.setRightPanelVisible(true)
  store.setRightPanelType("Application")
  store.setRightPanelTitle('Application')
}
</script>

<style>
.smooth-dnd-container.horizontal {
  width: 100%;    
  flex-grow: 1;
  position: relative;
  display: flex !important;
  gap: 10px;  
  justify-content: space-between;
}

.smooth-dnd-draggable-wrapper {  
}
</style>

<style lang="scss" scoped>
.pass-design-center {
  padding: 24px;
  flex-basis: 50%;
}

.card-container {    

  .pass-card {
    width: 330px;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;    
    border-radius: 10px;
    &.saving {
      box-shadow: none;
      border: 0;
      border-radius: 0;
      .drag-container {
        border: 0;
      }
    }
    &.front {
      height: 470px;
    }    
    .pass-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        display: flex;
        align-items: center;
        img {
          cursor: pointer;
        }
        .logo-text {
          cursor: pointer;
          margin-left: 8px;
          color: #ffffff;
          width: 80px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .logo img{
        width: 24px;        
      }
      height: 40px;
      margin-bottom: 16px;


      .drag-item {
        width: 110px;
      }

      .card-header-drag {        
        width: 110px;
        .label {
          text-align: right;
        }
      }
    }

    .pass-card-image {
      margin-left: -8px;
      margin-right: -8px;
      margin-bottom: 16px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
    
    .bar-code {
      background-color: white;
      padding: 10px;
      border-radius: 4px;
      display: inline-block;
    }

    &.back {
      background-color: #ffffff;
      min-height: 470px;

      .add-application {
        background-color: #f9f9f9;
        border-radius: 8px;
        padding: 16px;
        button { 
          @apply text-brand;
          padding: 6px 8px;
          border-radius: 4px;
          min-width: 64px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
        }
      }

      .switches {
        width: 100%;
        cursor: not-allowed;
        margin-top: 24px;
        padding-left: 16px;
        border-radius: 8px;
        margin-bottom: 24px;
        background-color: #f9f9f9;

        .divider {
          margin: 0px;
          flex-shrink: 0;
          border-width: 0px 0px thin;
          border-style: solid;
          border-color: rgba(0, 0, 0, 0.12);
        }
      }

      .remove-pass {
        width: 100%;
        cursor: not-allowed;
        padding: 8px;
        border-radius: 8px;
        margin-bottom: 24px;
        background-color: #f9f9f9;
        text-align: center;
      }

      .pass-detail-fields {
        width: 100%;
        padding: 8px 16px;
        background-color: #f9f9f9;
        .drag-container {
          height: 30px;
        }
      }
    }

    .pass-card-body {
      .card-body-drag {
        height: 42px;
        width: 100%;
      }    

      .drag-item {
        width: 90px;
      }

    }

    .drag-container {
      height: 42px;
      border: 1px dashed lightblue;
      display: flex;         
      .drag-item {            
        cursor: grab;        
        font-size: 12px;
        
        .label {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          display: inline-block;
        }
                
        .skeleton {
          width: 100%;
          height: 16px;
          display: inline-block;
          background-color: rgba(51, 51, 51, 0.3);
        }

        &.selected {
          height: 40px;
          border: 1px solid rgb(180, 158, 255);          
        }
      }
    }
  }
}

.pass-detail-fields {
  .details-item-container {
    .details-item {
      cursor: grab;
      &.selected {
        border: 1px solid var(--color-brand);
        .skeleton {
          background-color: var(--color-brand);
        }
      }
      .skeleton {
        width: 100%;
        height: 16px;
        display: inline-block;
        background-color: rgba(51, 51, 51, 0.3);
      }
    }
  }

}
</style>